<template>
	<view class="u-page vip-page">
		<view class="vip-module shadow shadow-lg">
			<view class="cu-bar bg-white solid-bottom card_title">
				<view class="action">
					<text class="cuIcon-titles text-yellow"></text> {{vip_type[0].name}}
				</view>
			</view>
			<view class="cu-list grid my_card col-3 no-border shadow">
				<view class="cu-item vip-money-iteam" v-for="item in vip_type[0].goodsList" :key="item.id">
					<view class="money-iteam"  @click="pay(item.id)">
						<view class="text-yellow text-sm" style="margin-bottom: 10rpx;">{{item.name}}</view>
						<view class="text-yellow text-xs">售价：{{item.price}}元</view>
					</view>
				</view>
			</view>
		</view>
		<view class="vip-module shadow shadow-lg" style="margin-top: 50rpx;">
			<view class="cu-bar bg-white solid-bottom card_title">
				<view class="action">
					<text class="cuIcon-titles text-yellow"></text> {{vip_type[1].name}}
				</view>
			</view>
			<view class="cu-list grid my_card col-3 no-border shadow">
				<view class="cu-item vip-money-iteam"  v-for="item in vip_type[1].goodsList" :key="item.id">
					<view class="money-iteam"  @click="pay(item.id)">
						<view class="text-yellow text-sm" style="margin-bottom: 10rpx;">{{item.name}}</view>
						<view class="text-yellow text-xs">售价：{{item.price}}元</view>
					</view>
				</view>
			</view>
		</view>
		<!-- <view class="vip-tip text-gray">会员须知</view> -->
	</view>
</template>

<script>
	export default{
		data(){
			return{
				vip_type:[],
				background: {
					//backgroundColor: '#001f3f',
					// 导航栏背景图
					background: 'url(../../static/vip.png) no-repeat',
					// 还可以设置背景图size属性
					// backgroundSize: 'cover',
					// 渐变色
					// backgroundImage: 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'
				}
			}
		},
		onReady() {
			this.init();
		},
		methods:{
			init(){
				this.$H.get("/homeapi/goods",{},{}).then(res=>{
					this.vip_type =res.data;
				}).catch(err=>{
					
				})
			},
			pay(id){
				uni.showLoading({
					mask:true,
				    title: '加载中'
				});
				this.$H.post("/homeapi/order",{id:id},{}).then(res=>{
					uni.requestPayment({
					    provider: 'wxpay',
					    timeStamp: res.data.timeStamp,
					    nonceStr: res.data.nonceStr,
					    package: res.data.package,
					    signType: 'MD5',
					    paySign: res.data.sign,
					    success: function (res) {
							uni.hideLoading();
							uni.showToast({
							    title: '购买成功',
							    duration: 1000
							});
					    },
					    fail: function (err) {
							uni.hideLoading();
							uni.showToast({
							    title: '购买失败',
								icon:'none',
							    duration: 1000
							});
					    }
					});
				}).catch(err=>{
					uni.hideLoading();
					uni.showToast({
					    title: '购买失败',
						icon:'none',
					    duration: 1000
					});
				})
			}
		}
	}
</script>

<style>
	.vip-page{
		height: 100vh;
		background-color: #FFFFFF;
		display: flex;
		flex-direction: column;
		padding: 15px;
	}
	.vip-money-iteam{
		padding: 0px;
		justify-content: center;
		align-items: center;
	}
	.money-iteam{
		border: 1px solid #fbbd08;
		padding: 24rpx;
		width: 180rpx;
		border-radius: 5px;
	}
	.vip-module{
		border: 1px solid #e6e6e6;
		border-radius: 5px;
	}
	.vip-tip{
		width: 100%;
		bottom: 0rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 10px;
		padding: 60rpx;
	}
</style>
